/*
 * @Date: 2022-03-29 13:00:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-12 09:35:12
 * @FilePath: /payment/pay/src/pages/PayGroundCard/PayGroundOrder.jsx
 */

import React, { useState, useEffect } from "react";
import zhCN from "antd/es/locale/zh_CN";
import {
  Row,
  Col,
  Button,
  Table,
  ConfigProvider,
  Select,
  DatePicker,
  Space,
  Input,
  Checkbox,
  Form,
} from "antd";
import Tab from "../../components/Tabs";
import "./Card.css";
import { SearchOutlined, CloudUploadOutlined } from "@ant-design/icons";
import {
  getCardOrder,
  getCardOrderAllcard,
  getCardOrderState,
  getCardOrderAlluser,
  getCardOrderSearch,
} from "./../../API/PayCard";
import Search from "antd/es/transfer/search";
export default function PayGroundOrder() {
  const optionlist = [
    { label: "系统订单号", value: "Orderno" },
    { label: "代付订单ID", value: "Orderid" },
    { label: "商户名称", value: "Cardname" },
    { label: "银行名称", value: "Allmoney" },
    { label: "银行卡号", value: "Creditcard" },
    { label: "收款人姓名", value: "Payeename" },
    { label: "实付金额", value: "Actualpayment " },
    { label: "手续费", value: "Servicecharge" },
    { label: "扣除金额", value: "Amountdeducted" },
    { label: "受理人", value: "Acceptor" },
    { label: "卡商", value: "Card" },
    { label: "代付状态", value: "Paymentstatus" },
    { label: "回调状态", value: "Statecallback" },
    { label: "创建时间", value: "Creationtime" },
    { label: "受理时间", value: "processingtime" },
    { label: "代付时间", value: "Paymenttime" },
    { label: "回调时间", value: "Callbacktime" },
    { label: "商户订单号", value: "MerchantOrderNumber" },
  ];
  const oplst = [];
  optionlist.map((item, index) => {
    if (index !== 0 && index !== 1) {
      oplst.push(item.value);
    }
  });
  const [options, setoptions] = useState(oplst);
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  //const [isState, setIsState] = useState(true);
  //总条数
  const [total, settotal] = useState(null);
  //每页条数
  const [pageSize, setpageSize] = useState(5);
  //表单绑定
  const [form] = Form.useForm();
  const [Statefe, setStatefe] = useState(false);
  //所有卡商数组
  const [Allcards, setAllcards] = useState([]);
  //所有卡商数组
  const [Allusers, setAllusers] = useState([]);
  //订单钻状态数组
  const [orderst, setorderst] = useState([]);
  //时间
  const [time, settime] = useState(null);
  // const isState=true
  //const [visible, setVisible] = useState(false);
  function onChangex(e) {
    console.log(e);
    setoptions(e);
  }
  function onchangeFs(e) {
    //e.stopPropagation();
    setStatefe(false);
  }
  function onFs(e) {
    e.stopPropagation();
    setStatefe(true);
  }
  let list = [];
  const changeFs = (e) => {
    e.stopPropagation();
    setStatefe(Statefe === true ? false : true);
  };

  const columns = [
    {
      title: "系统订单号",
      width: 200,
      dataIndex: "Orderno",
      key: "Orderno",
      fixed: "left",
    },
    {
      title: "代付订单号",
      width: 200,
      dataIndex: "Orderid",
      key: "Orderid",
    },
    {
      title: "商户名称",
      dataIndex: "Cardname",
      key: "Cardname",
      width: 150,
    },
    {
      title: "银行名称",
      dataIndex: "Allmoney",
      key: "Allmoney",
      width: 150,
    },
    {
      title: "银行卡号",
      dataIndex: "Creditcard",
      key: "Creditcard",
      width: 150,
    },
    {
      title: "收款人姓名",
      dataIndex: "Payeename",
      key: "Payeename",
      width: 150,
    },
    {
      title: "实付金额",
      dataIndex: "Actualpayment",
      key: "Actualpayment",
      width: 150,
    },
    {
      title: "手续费",
      dataIndex: "Servicecharge",
      key: "Servicecharge",
      width: 150,
    },
    {
      title: "扣除金额",
      dataIndex: "address",
      key: "Amountdeducted",
      width: 150,
    },
    {
      title: "受理人",
      dataIndex: "Acceptor",
      key: "Acceptor",
      width: 150,
    },
    {
      title: "卡商",
      dataIndex: "Card",
      key: "Card",
      width: 150,
    },
    {
      title: "代付状态",
      dataIndex: "Paymentstatus",
      key: "Paymentstatus",
      width: 150,
    },
    {
      title: "回调状态",
      dataIndex: "Statecallback",
      key: "Statecallback",
      width: 150,
    },
    {
      title: "创建时间",
      dataIndex: "Creationtime",
      key: "Creationtime",
      width: 200,
    },
    {
      title: "受理时间",
      dataIndex: "processingtime",
      key: "processingtime",
      width: 200,
    },
    {
      title: "代付时间",
      dataIndex: "Paymenttime",
      key: "Paymenttime",
      width: 200,
    },
    {
      title: "回调时间",
      dataIndex: "Callbacktime",
      key: "Callbacktime",
      width: 200,
    },
    {
      title: "商户订单号",
      dataIndex: "MerchantOrderNumber",
      key: "MerchantOrderNumber",
      width: 200,
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      align: "center",
      width: 200,
      render: () => (
        <Button type="primary" className="green">
          操作
        </Button>
      ),
    },
  ];
  const [columns1, setcolumns] = useState(columns);
  useEffect(() => {
    CardOrder(10, 1);
    columns.map((item) => {
      //console.log(item.key);
      options.map((item1) => {
        if (item.key === item1) {
          //console.log(item);
          list.push(item);
        }
      });
      if (item.key === "operation") {
        console.log(item);
        list.push(item);
      }
    });
    // console.log(list);
    setcolumns(list);
  }, [options]);
  //订单数据接口
  const CardOrder = (limit, page) => {
    getCardOrder({ limit: limit, page: page }).then((res) => {
      console.log(res);
      if (res.code === 0) {
        let arr = [];
        res.data.map((item, index) => {
          let obj = {
            key: index,
            Orderno: item.liuShuiHao,
            Orderid: item.dfId,
            Cardname: item.shangHuName,
            Allmoney: item.yinHangKa.yinHangName,
            Creditcard: item.yinHangKa.yinHangKaHao,
            Payeename: item.shouKuanRen,
            Actualpayment: item.shiFuJinE,
            Servicecharge: item.tiXianShouXvFei,
            Amountdeducted: item.kouChuJinE,
            Acceptor: item.caoZuoRen,
            Card: item.kaShangName,
            Paymentstatus: item.daiFuZhuangTai,
            Statecallback: "",
            Creationtime: item.createTime,
            processingtime: item.caoZuoShiJian,
            Paymenttime: item.daiFuShiJian,
            Callbacktim: "",
            MerchantOrderNumber: item.dingDanId,
          };
          arr.push(obj);
        });
        settotal(res.count);
        setdata(arr);
      }
    });
  };
  //查询所有商户接口
  const Alluser = () => {
    getCardOrderAlluser({}).then((res) => {
      console.log(res);

      setAllusers(res.data);
    });
  };
  //查询所有卡商接口
  const Allcard = () => {
    getCardOrderAllcard({}).then((res) => {
      console.log(res);
      setAllcards(res.data);
    });
  };
  //查询所有订单状态
  const OrderState = () => {
    getCardOrderState({}).then((res) => {
      console.log(res);
      setorderst(res.data);
    });
  };
  //查询接口
  const ordersearch = (
    total,
    page,
    payee,
    orderno,
    Payid,
    allcard,
    orderid
  ) => {
    console.log(orderid);
    getCardOrderSearch({
      limit: total,
      page: page,
      chiKaName: payee,
      daiFuZhuangTai: orderno,
      kaShangName: Payid,
      liuShuiHao: orderid,
      shangHuName: allcard,
      time: time,
    }).then((res) => {
      console.log(res);
      if (res.code === 0) {
        let arr = [];
        res.data.map((item, index) => {
          let obj = {
            key: index,
            Orderno: item.liuShuiHao,
            Orderid: item.dfId,
            Cardname: item.shangHuName,
            Allmoney: item.yinHangKa.yinHangName,
            Creditcard: item.yinHangKa.yinHangKaHao,
            Payeename: item.shouKuanRen,
            Actualpayment: item.shiFuJinE,
            Servicecharge: item.tiXianShouXvFei,
            Amountdeducted: item.kouChuJinE,
            Acceptor: item.caoZuoRen,
            Card: item.kaShangName,
            Paymentstatus: item.daiFuZhuangTai,
            Statecallback: "",
            Creationtime: item.createTime,
            processingtime: item.caoZuoShiJian,
            Paymenttime: item.daiFuShiJian,
            Callbacktim: "",
            MerchantOrderNumber: item.dingDanId,
          };
          arr.push(obj);
        });
        setdata(arr);
      }
    });
  };
  //搜索按钮
  const search = () => {
    form.validateFields().then((values) => {
      console.log(values);
      ordersearch(
        total,
        1,
        values.payee,
        values.orderno,
        values.Payid,
        values.allcard,
        values.orderid
      );
    });
  };
  //时间
  const heTime = (data, dateString) => {
    let time = dateString[0] + " - " + dateString[1];
    settime(time);
    if (data === null) {
      //CardOrder(total, 1);
    }
  };
  //卡商列表的表格分页函数
  const CardPagechange = (pagination) => {
    setpageSize(pagination.pageSize);
    CardOrder(pageSize, pagination.current);
  };
  const [data, setdata] = useState([]);
  return (
    <div onClick={onchangeFs}>
      <Tab title={"代付订单"}></Tab>
      <ConfigProvider locale={zhCN}>
        <Form form={form}>
          <Row className="Input-two " style={{ marginTop: "20px" }}>
            <Col span={4}>
              <Form.Item name="orderid">
                <Input
                  size="large"
                  type="text"
                  placeholder="系统订单号/代付订单号"
                />
              </Form.Item>
            </Col>
            <Col span={4} className="Iup-se">
              <Form.Item name="allcard">
                <Select
                  size="large"
                  placeholder="全部商户"
                  style={{ width: "100%" }}
                  onClick={Alluser}
                >
                  <Option>全部商户</Option>
                  {Allusers.map((item, index) => {
                    return (
                      <Option value={item.name} key={index}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={4} className="Iup-se">
              <Form.Item name="orderno">
                <Select
                  size="large"
                  placeholder="订单状态"
                  style={{ width: "100%" }}
                  onClick={OrderState}
                >
                  <Option>订单状态</Option>
                  {orderst.map((item, index) => {
                    return (
                      <Option key={item.id} value={item.status}>
                        {item.status}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={5} className="Iup-se">
              <Space direction="vertical">
                <RangePicker size="large" showTime onChange={heTime} />
              </Space>
            </Col>
            <Col span={4} className="Iup-se">
              <Form.Item name="status">
                <Select
                  size="large"
                  style={{ width: "100%" }}
                  placeholder="回调状态"
                >
                  <Option>回调状态</Option>
                  <Option value="未回调">未回调</Option>
                  <Option value="已回调">已回调</Option>
                  <Option value="已失败">已失败</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row className="Input-two">
            <Col span={4}>
              <Form.Item name="Payid">
                <Select
                  size="large"
                  placeholder="代付用户ID"
                  style={{ width: "100%" }}
                  onClick={Allcard}
                >
                  <Option>代付用户ID</Option>
                  {Allcards.map((item, index) => {
                    return (
                      <Option value={item.name} key={index}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={4} className="Iup-se">
              <Form.Item name="payee">
                <Input size="large" type="text" placeholder="收款人" />
              </Form.Item>
            </Col>
            <Col span={2} className="Button-icon">
              <Button
                className="green"
                size="large"
                type="primary"
                icon={<SearchOutlined />}
                onClick={search}
              >
                搜索
              </Button>
            </Col>
            <Col span={2} className="Button-icon">
              <Button
                className="green"
                size="large"
                type="primary"
                icon={<CloudUploadOutlined />}
              >
                导出
              </Button>
            </Col>
          </Row>
          <Row className="Input-three">
            <Col span={2} className="transaction-number"></Col>
            <Col span={2}>
              <Button type="primary" disabled className="btn-wh"></Button>
            </Col>
            <Col span={2} className="transaction-number"></Col>
            <Col span={3}>
              <Button type="primary" disabled className="btn-wh"></Button>
            </Col>
            <Col span={2} className="transaction-number"></Col>
            <Col span={3}>
              <Button type="primary" disabled className="btn-wh"></Button>
            </Col>
            <Col span={2} className="transaction-number"></Col>
            <Col span={4}>
              <Button type="primary" disabled className="btn-wh"></Button>
            </Col>
            <Col span={2}></Col>
            <Col span={1}>
              <Button
                type="primary"
                className="btn-whee"
                icon={<SearchOutlined />}
                onClick={changeFs}
              ></Button>
              <div
                className={Statefe === true ? "bt-list" : "bt-liste"}
                onClick={onFs}
              >
                <Checkbox.Group
                  options={optionlist}
                  onChange={onChangex}
                  defaultValue={oplst}
                />
              </div>
            </Col>
            <Col span={1}></Col>
          </Row>
        </Form>
        <Table
          bordered="true"
          rowSelection={{
            type: Checkbox,
            fixed: true,
            columnWidth: "60px",
          }}
          columns={columns1}
          dataSource={data}
          scroll={
            columns1.length <= 5 ? { x: 300, y: 450 } : { x: 300, y: 450 }
          }
          sticky="true"
          onChange={CardPagechange}
          pagination={{
            total: total,
            pageSize: pageSize,
            pageSizeOptions: [5, 10, 30, 100],
            showQuickJumper: true,
          }}
        />
      </ConfigProvider>
    </div>
  );
}
